import React, { PureComponent } from "react";
import { Flex } from "antd-mobile";
import s from "./index.scss";
import AxFooter from 'components/Footer'
import AxHeader from 'components/AxHeader'
import {callApi} from 'app/utils'

import rechargeBankPng from "assets/images/rechargeBank.png"
 
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      info:{}
    };
  
  }


  componentDidMount() {
    if(localStorage.getItem('userData')!=null&&localStorage.getItem('userData')!=undefined&&localStorage.getItem('userData')!="undefined"){
     callApi('/account/info',{token:JSON.parse(localStorage.getItem('userData')).token},"POST").then((data)=>{
        console.log(data)
        this.setState({
          info:data.data
        })
     })
    }
  }
 

  render() {
    let str
    let {info} = this.state
    if(this.props.location.query.flag=='2'){
      str = <div className={`${s.Box}`}>
      <Flex direction="column" className={`${s.cardBox2}`}>
        <Flex.Item className={`${s.top} ${s.item}`}>{info.bankName}</Flex.Item>
        <Flex.Item className={`${s.center} ${s.item}`}>{info.bindedCardno}</Flex.Item>
        <Flex.Item className={`${s.bot} ${s.item}`}>{info.realName}</Flex.Item>
      </Flex>
      <Flex className={`${s.tip}`} justify="center">
        该银行卡可用于提现及快捷充值
      </Flex>
    </div>
    }else{
      str = <div className={`${s.Box}`}>
      <Flex direction="column" className={`${s.cardBox1}`}>
        <div className={`${s.top} ${s.item}`}><img src={rechargeBankPng}/><span>电子交易账户</span></div>
        <div className={`${s.center} ${s.item}`}>{info.bindedCardno}</div>
        <div className={`${s.bot} ${s.item}`}>
          <Flex.Item className={`${s.botItem}`}>开户人&nbsp;&nbsp;:&nbsp;&nbsp;{info.realname}</Flex.Item>
          <Flex.Item className={`${s.botItem}`}>账户余额&nbsp;&nbsp;:&nbsp;&nbsp;{info.balance}元</Flex.Item>
          <Flex.Item className={`${s.botItem}`}>开户行&nbsp;&nbsp;:&nbsp;&nbsp;江西银行</Flex.Item>
        </div>
      </Flex>
    </div>
    }
    return (
      <div className={`${s.bankCardBox}`}>
        <div>
          <AxHeader />
            {str}
        </div>


        <AxFooter/>
      </div>
    );
  }
}
